<!DOCTYPE html>
<html lang="en">

<head>
    <title>贝康</title>
    <#include "/ayi/components/meta.html" />
    <#include "/ayi/components/stylesheets.html" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.css">
    <style type="text/css">
        html,
        body {
            position: relative;
            height: 100%;
        }

        .swiper-member {
            height: 60%;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: transparent;
            height: 70%;
            overflow: hidden;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide:nth-child(1) {
            height: 100%;
            background-color: white;
        }

        .swiper-slide:nth-child(2) {
            height: 100%;
            background-color: white;
        }

        /*.swiper-slide:nth-child(2n) {
            height: 60%;
        }*/

        .info-content {
            width: 100%;
            height: 100%;
        }

        /* 第一页 第二页 start */
        .beikang-info-top {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        .beikang-info-top>img {
            position: relative;
            top: -20px;
            width: 100%;
            height: auto;
        }

        .beikang-info-top-tab {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70%;
            z-index: 1;
        }

        .beikang-info-top-tab img {
            width: 100%;
            height: auto;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .beikang-info-title {
            margin-top: 15px;
        }

        .beikang-info-title img {
            width: 25%;
            height: auto;
        }

        .beikang-info-content {
            padding: 15px 10px;
            font-size: 1.5rem;
            text-align: left;
            text-indent: 2em;
        }

        .beikang-info-content *+p {
            margin-top: 0.8rem;
        }

        .beikang-info-content p {
            margin: 0 0 0.8rem 0;
        }

        .beikang-info-banner {
            margin-top: 2px;
        }

        .beikang-info-banner>img {
            width: 100%;
        }
        /* 第一页 第二页 end */

        /* 阿姨列表 start */
        .ayi-item {
            position: relative;
            width: 95%;
            height: 97%;
            border-radius: 8px;
            overflow: hidden;
        }

        .ayi-bottom-background {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 35%;
            background: linear-gradient(transparent, #464774);
        }

        .ayi-content {
            position: absolute;
            width: 100%;
            bottom: 0;
            padding: 10px;
            text-align: left;
        }

        .ayi-cover {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
        }
        /* 阿姨列表 end */

        /* 最后一页 联系方式 start */
        /* 最后一页 联系方式 end */


        .bottom-arrow {
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #888;
            z-index: 5;
            font-size: 1.3em;
        }

        .bottom-arrow>img {
            width: 50px;
        }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="info-content">
                    <div class="beikang-info-top">
                        <img src="/ayi/assets/img/banner-beikang-info.JPG" />
                        <div class="beikang-info-top-tab">
                            <img src="/ayi/assets/img/info-title1.png" />
                        </div>
                    </div>
                    <div class="beikang-info-title">
                        <img src="/ayi/assets/img/subtitle1.png" />
                    </div>
                    <div class="beikang-info-content">
                        <p>贝康护理学院是贝康集团公司旗下的教育品牌，源自香港，由来自美国麻省理工、英国牛津大学等国际名校的医疗顾问组建，同时聘请享誉港澳台和珠江三角的知名（香港养和医院、澳门镜湖医院、广东省妇幼保健院、珠海市妇幼保健院、珠海市人民医院等）等护理专家担任教学顾问及讲师，并聘请具有20年以上行业经验的讲师授课。</p>
                        <p>贝康护理学院在英国、港澳、台湾、珠海成立母婴课题研究中心，并于2016年正式进入中国内地，与香港护理学院、澳门护理学院、珠海市护理学会合作开发了一系列专业护理课程。学院拥有国际一流的硬件设施，具备专业完善的教学条件。</p>
                        <p>贝康护理学院遵循“怀仁者之心，止于至善”的校训，秉持人文立德，专业立身的教育理念，为社会培育人文素养深厚，专业素质精湛的护理人才。</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="info-content">
                    <div class="beikang-info-top">
                        <img src="/ayi/assets/img/banner-collete-info.JPG" />
                        <div class="beikang-info-top-tab">
                            <img src="/ayi/assets/img/info-title2.png" />
                        </div>
                    </div>
                    <div class="beikang-info-banner">
                        <img src="/ayi/assets/img/banner1.JPG" />
                    </div>
                    <div class="beikang-info-content">
                        <p>母婴护理专业课程丰富多元，教学形式多样。专业学科教育扎实全面，兼有精选的艺术欣赏、形象与礼仪、心理引航、高效沟通等人文教育课程。</p>
                        <p>学院的教育管理充满科学精神和人文翔，让学员在教育中树立道德情操和责任意识，在贝康充分感受到被“爱、呵护和信赖”，并爱人如已，回报社会。贝康致力于打造优秀的职业人、培养有道德和能力的高尚的人。</p>
                    </div>
                </div>
            </div>
            <#list member as item>
                <div class="swiper-slide">
                    <div class="ayi-item" style="background: url(${item.image!''}); background-size: cover;">
                        <div class="ayi-bottom-background"></div>
                        <div class="ayi-content theme-color-2">
                            <span>${item.name!''}</span>
                            <br/>
                            <span>${item.desc!''}</span>
                        </div>
                        <a href="/ay/info/${item.id!''}">
                            <div class="ayi-cover"></div>
                        </a>
                    </div>
                </div>
            </#list>
            <!-- <div class="swiper-slide">客服介绍 & 联系人</div> -->
        </div>
        <!-- <div class="swiper-pagination"></div> -->
    </div>
    <div class="bottom-arrow">
        <!-- <img src=""> -->
        <i class="am-icon-angle-double-up"></i>
    </div>
    <#include "/ayi/components/scripts.html" />
    <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        slidesPerView: 'auto',
        spaceBetween: 30,
        slideToClickedSlide: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
    </script>
</body>

</html>